<template>
    <div class='root'>
        <swiper 
            dots-class='dot-style'
            auto 
            loop 
            dots-position="center" 
            style="height: 180px;">
            <swiper-item v-for="(item,i) in sortArr" :key='i'>
                <carousel-item :goodsArr="item"></carousel-item>
            </swiper-item>
        </swiper>
        <div class='divide-line'></div>
    </div>
</template>
<script>
    import { Swiper ,SwiperItem} from 'vux'
    import CarouselItem from './CarouselItem'
    export default{
        data:function(){
            return {
                icons:['static/img/1.png','static/img/2.png','static/img/3.png'],
            }
        },
        props:['sortGoods'],
        components:{
            Swiper,
            SwiperItem,
            CarouselItem
        },
        computed:{
            sortArr:function(){
                var goodsArr = this.sortGoods;
                var loopCout = Math.ceil(goodsArr.length / 8)
                var resArr = []
                for(var i=0;i<loopCout;i++){
                    if(i==loopCout-1){
                        resArr.unshift(goodsArr.slice(i*8))
                    }else{
                        resArr.unshift(goodsArr.slice(i*8,8))
                    }
                }
                return resArr
            }
        },
        filters:{
            sortImgFormat(v){
                return '//fuss10.elemecdn.com' + v
            }
        },
    }
</script>
<style scoped>
    .divide-line{
        height: 1rem;
        width: 100%;
        background-color: #F4F4F4;
    }
</style>